<template>
  <view
    :class="classNames"
    @touchstart="handleMouseDown"
    @touchmove="handleMouseMove"
    @touchend="handleMouseUp"
    @touchcancel="handleMouseUp"
  >
  </view>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from "vue";
const Slider = defineComponent({
  name: "Slider",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    min: {
      type: Number,
      required: true,
    },
    max: {
      type: Number,
      required: true,
    },
    formatTooltip: {
      type: Function,
      default: void 0,
    },
    value: [String, Number],
    showTooltip: {
      type: Boolean,
      default: true,
    },
  },
  emits: ["moving", "movestart", "moveend"],
  setup(props, { emit }) {
    const prefixCls = "arco-slider-btn";
    const isDragging = ref(false);
    const visible = ref(true);

    const handleMouseDown = (e) => {
      if (props.disabled) {
        return;
      }
      e.preventDefault();
      isDragging.value = true;
      emit("movestart");
    };

    const handleMouseMove = (e) => {
      if (props.disabled) {
        return;
      }
      const touch = e.touches[0];
      emit("moving", touch.clientX, touch.clientY);
    };
    const handleMouseUp = () => {
      console.log("我开始了");
      isDragging.value = false;
      emit("moveend");
    };

    const classNames = computed(() => {
      return [prefixCls];
    });

    return {
      prefixCls,
      classNames,
      visible,
      handleMouseDown,
      handleMouseMove,
      handleMouseUp,
    };
  },
});
export default Slider;
</script>
